<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta name="generator" content="HTML Tidy, see www.w3.org">
        <meta http-equiv="Content-Type" content= "text/html; charset=iso-8859-1">
        <title>DemoGraphics</title>
        <LINK href="index.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="jquery-1.4.2.js">
        </script>
        <script type="text/javascript" src="jquery-ui-1.8.1.js">
        </script>
        <script type="text/javascript" src="http://www.google.com/jsapi">
        </script>
        <link rel="stylesheet" type="text/css" href= "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
        <script type="text/javascript" src="map.js">
        </script>
        <script type="text/javascript" src="Manager.js">
        </script>
        <script type="text/javascript" src="Results.js">
        </script>
        <script type="text/javascript" src="globals.js">
        </script>
        <script type="text/javascript" src="main.js">
        </script>
    </head>
    <body>
        <div id="headerBar">
        <center>
        </center>
        <img src="http://www.law.ucla.edu/williamsinstitute/images/law01-L.jpg">
        </img><img id="logo" style="margin:30px;" src="http://www.law.ucla.edu/williamsinstitute/images/williams_logo.gif">
        </img>
        </center>
    </div>
    <center>
        <div id="supercontainer">
            <div id="container">
                <div id="chart_div">
                    I'm in chart_div!
                </div>
                <div id="demographics">
                    <div id="demohelp">
                        <p>
                            Define the demographic you're curious
                            about by selecting attributes like
                            relationship status and ethnicity.
                            Then choose what you want to know 
                            about the demographic.
						</p>
						<p>	
                            Finally, click <b>Next</b>
                            to view your results.
						</p>
						<p>	
                            Note that some
                            demographics are too small for accurate
                            data and won't be charted.
                        </p>
                    </div>
                    <div id="innerDemo">
                        <div id="accordion">
                            <h3><a href="#">Relationship
                                    Status</a></h3>
                            <form id="coupletype">
                                <label for="dsm">
                                    <input type= "radio" name="couple" id="dsm" value="dsm">Different Gender
                                    Married
                                </label>
                                <br>
                                <label for="dsu">
                                    <input type= "radio" name="couple" id="dsu" value="dsu">Different Gender
                                    Unmarried
                                </label>
                                <br>
                                <label for="ssa">
                                    <input type= "radio" name="couple" id="ssa" value="ssa">Same Gender
                                    All
                                </label>
                                <br>
                                <label for="ssf">
                                    <input type= "radio" name="couple" id="ssf" value="ssf">Same Gender
                                    Female
                                </label>
                                <br>
                                <label for="ssm">
                                    <input type= "radio" name="couple" id="ssm" value="ssm">Same Gender
                                    Male
                                </label>
                                <br>
                            </form>
                            <h3><a href="#">Ethnicity</a></h3>
                            <form id="ethnicity">
                                <label for="w">
                                    <input type="radio" name="ethnicity" id="w" value= "w">White
                                </label>
                                <br>
                                <label for="l">
                                    <input type="radio" name="ethnicity" id="l" value= "l">Latino
                                </label>
                                <br>
                                <label for="aa">
                                    <input type= "radio" name="ethnicity" id="aa" value="aa">African
                                    American
                                </label>
                                <br>
                                <label for="api">
                                    <input type= "radio" name="ethnicity" id="api" value="api">Asian Pacific
                                    Islander
                                </label>
                                <br>
                                <label for="anai">
                                    <input type= "radio" name="ethnicity" id="anai" value="anai">Alaskan/Native
                                    American Indian
                                </label>
                                <br>
                            </form>
                            <h3><a href="#">Comparators</a></h3>
                            <form id="compare">
                                <label for="age">
                                    <input type= "radio" name="compare" id="age" value="age">Age
                                </label>
                                <br>
                                <label for="vet">
                                    <input type= "radio" name="compare" id="vet" value="vet">Veteran
                                </label>
                                <br>
                                <label for="chi">
                                    <input type= "radio" name="compare" id="chi" value="chi">Children
                                </label>
                                <br>
                                <label for="inc">
                                    <input type= "radio" name="compare" id="inc" value="inc">Income
                                </label>
                                <br>
                                <label for="edu">
                                    <input type= "radio" name="compare" id="edu" value="edu">College
                                </label>
                                <br>
                            </form>
                        </div>
                    </div>
                </div>
                <div id="map">
                    <div id="visualization" class="maps">
                    </div>
                    <div id="hide" class="maps">
                    </div>
                    <div id="qfacts" class="maps">
                    </div>
                    <button onclick="javascript:theMap.qFactsShow()" id= "qFactsToggle">
                        Quick Facts
                    </button>
                <div id="list">
                </div>
                </div>
                <div id="walkthrough">
                    <br>
                    <span style="color:#FF9418;">Choose the states that you wish to find
                        information about</span>
                    <br>
                </div>
            </div>
            <button onclick="mapNext();" id= "next">
                Next
            </button>
        </div>
        <div id="dialog">
        </div>
    </center>
</body>
</html>
